സ്‌ക്രീൻ ഓറിയന്റേഷൻ മാസ്റ്ററിംഗ്: ഉപകരണങ്ങളുടെ ഭ്രമണം കൈകാര്യം ചെയ്യുന്നതിനുള്ള സമഗ്രമായ ഒരു ഗൈഡ്

ഇന്നത്തെ മൾട്ടി-ഡിവൈസ് ലോകത്ത്, സ്‌ക്രീൻ ഓറിയന്റേഷൻ മനോഹരമായി കൈകാര്യം ചെയ്യുന്നത് നല്ല ഉപയോക്തൃ അനുഭവം നൽകുന്നതിന് വളരെ പ്രധാനമാണ്. ഒരു സ്മാർട്ട്‌ഫോൺ, ടാബ്‌ലെറ്റ് അല്ലെങ്കിൽ മടക്കാവുന്ന ഉപകരണം (foldable device) ആയാലും, ഉപയോക്താക്കൾ അവരുടെ ഉപകരണം തിരിക്കുമ്പോൾ ആപ്ലിക്കേഷനുകൾ തടസ്സമില്ലാതെ പൊരുത്തപ്പെടണമെന്ന് പ്രതീക്ഷിക്കുന്നു. വിവിധ പ്ലാറ്റ്‌ഫോമുകളും, നിങ്ങളുടെ ആപ്ലിക്കേഷനുകൾ പ്രതികരിക്കുന്നതും ഉപയോക്തൃ സൗഹൃദപരവുമാണെന്ന് ഉറപ്പാക്കുന്നതിനുള്ള സാങ്കേതിക വിദ്യകളും ഉൾക്കൊള്ളുന്ന, ഉപകരണ ഭ്രമണം കൈകാര്യം ചെയ്യുന്നതിനെക്കുറിച്ചുള്ള ഒരു സമഗ്രമായ വിവരണം ഈ ഗൈഡ് നൽകുന്നു.

സ്‌ക്രീൻ ഓറിയന്റേഷൻ മനസ്സിലാക്കുന്നു

ഒരു ഉപകരണത്തിന്റെ സ്‌ക്രീനിൽ ഉള്ളടക്കം പ്രദർശിപ്പിക്കുന്ന ദിശയാണ് സ്‌ക്രീൻ ഓറിയന്റേഷൻ. പ്രധാന ഓറിയന്റേഷനുകൾ ഇവയാണ്:

• പോർട്രെയിറ്റ്: വീതിയേക്കാൾ ഉയരം കൂടുതലുള്ള സ്‌ക്രീൻ. സ്മാർട്ട്‌ഫോണുകൾക്ക് ഇത് സാധാരണ ഓറിയന്റേഷനാണ്.
• ലാൻഡ്‌സ്‌കേപ്പ്: ഉയരത്തേക്കാൾ വീതികൂടിയ സ്‌ക്രീൻ. വീഡിയോ കാണുന്നതിനോ ഗെയിം കളിക്കുന്നതിനോ ഇത് പലപ്പോഴും തിരഞ്ഞെടുക്കുന്നു.

ചില ഉപകരണങ്ങളും ആപ്ലിക്കേഷനുകളും ഇവയും പിന്തുണയ്ക്കുന്നു:

• റിവേഴ്സ് പോർട്രെയിറ്റ്: 180 ഡിഗ്രിയിൽ തിരിക്കുന്ന പോർട്രെയിറ്റ് ഓറിയന്റേഷൻ.
• റിവേഴ്സ് ലാൻഡ്‌സ്‌കേപ്പ്: 180 ഡിഗ്രിയിൽ തിരിക്കുന്ന ലാൻഡ്‌സ്‌കേപ്പ് ഓറിയന്റേഷൻ.

എന്തുകൊണ്ട് സ്‌ക്രീൻ ഓറിയന്റേഷൻ മാറ്റങ്ങൾ കൈകാര്യം ചെയ്യണം?

സ്‌ക്രീൻ ഓറിയന്റേഷൻ മാറ്റങ്ങൾ കൈകാര്യം ചെയ്യുന്നതിൽ പരാജയപ്പെടുന്നത്, ഇവയുൾപ്പെടെ വിവിധ പ്രശ്‌നങ്ങളിലേക്ക് നയിച്ചേക്കാം:

• ലേഔട്ട് പ്രശ്നങ്ങൾ: ഘടകങ്ങൾ തെറ്റായി സ്ഥാപിക്കുകയോ, വെട്ടിമാറ്റുകയോ, പരസ്പരം ഓവർലാപ്പ് ചെയ്യുകയോ ചെയ്യാം.
• ഡാറ്റ നഷ്ടം: ചില സന്ദർഭങ്ങളിൽ, സ്‌ക്രീൻ തിരിക്കുമ്പോൾ ആക്റ്റിവിറ്റി അല്ലെങ്കിൽ ആപ്ലിക്കേഷൻ സ്റ്റേറ്റ് നഷ്‌ടപ്പെടാം.
• മോശം ഉപയോക്തൃ അനുഭവം: ആശയക്കുഴപ്പമുണ്ടാക്കുന്നതോ തകർന്നതോ ആയ അനുഭവം ഉപയോക്താക്കളെ നിരാശപ്പെടുത്തുകയും നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ പ്രതിച്ഛായക്ക് കളങ്കം വരുത്തുകയും ചെയ്യും.
• പ്രകടന പ്രശ്നങ്ങൾ: ഇടയ്ക്കിടെയുള്ള റെൻഡറിംഗും ലേഔട്ട് കണക്കുകൂട്ടലുകളും പ്രകടനത്തെ ബാധിക്കും, പ്രത്യേകിച്ച് പഴയ ഉപകരണങ്ങളിൽ.

വിവിധ പ്ലാറ്റ്‌ഫോമുകളിൽ സ്‌ക്രീൻ ഓറിയന്റേഷൻ കൈകാര്യം ചെയ്യുന്നു

സ്‌ക്രീൻ ഓറിയന്റേഷൻ കൈകാര്യം ചെയ്യുന്നതിനുള്ള പ്രത്യേക സാങ്കേതിക വിദ്യകൾ നിങ്ങൾ ഏത് പ്ലാറ്റ്‌ഫോമിനാണ് വികസിപ്പിക്കുന്നത് എന്നതിനെ ആശ്രയിച്ചിരിക്കുന്നു. ഏറ്റവും പ്രചാരമുള്ള ചില പ്ലാറ്റ്‌ഫോമുകൾ പരിശോധിക്കാം:

1. Android

സ്‌ക്രീൻ ഓറിയന്റേഷൻ മാറ്റങ്ങൾ കൈകാര്യം ചെയ്യുന്നതിന് Android-ൽ നിരവധി സംവിധാനങ്ങൾ നൽകുന്നു. ഏറ്റവും സാധാരണമായ സമീപനങ്ങൾ ഇവയാണ്:

a. കോൺഫിഗറേഷൻ മാറ്റങ്ങൾ

സ്ഥിരസ്ഥിതിയായി, സ്‌ക്രീൻ ഓറിയന്റേഷൻ മാറുമ്പോൾ Android ആക്റ്റിവിറ്റി വീണ്ടും ഉണ്ടാക്കുന്നു. ഇതിനർത്ഥം `onCreate()` രീതി വീണ്ടും വിളിക്കുകയും, മുഴുവൻ ലേഔട്ടും വീണ്ടും ഇൻഫ്‌ലേറ്റ് ചെയ്യുകയും ചെയ്യുന്നു. ഓറിയന്റേഷനെ ആശ്രയിച്ച് UI പൂർണ്ണമായി പുനഃക്രമീകരിക്കുന്നതിന് ഇത് ഉപയോഗപ്രദമാകുമ്പോൾ തന്നെ, ലേഔട്ടിൽ সামান্যമായി ക്രമീകരണം വരുത്തേണ്ടി വരുമ്പോൾ ഇത് കാര്യക്ഷമമല്ലാത്ത ഒന്നായി മാറിയേക്കാം.

ആക്റ്റിവിറ്റി വീണ്ടും ഉണ്ടാക്കുന്നത് തടയാൻ, നിങ്ങളുടെ ആക്റ്റിവിറ്റി `AndroidManifest.xml` ഫയലിൽ `orientation` കോൺഫിഗറേഷൻ മാറ്റം കൈകാര്യം ചെയ്യുന്നു എന്ന് പ്രഖ്യാപിക്കാം:

<activity
 android:name=".MyActivity"
 android:configChanges="orientation|screenSize"
 ... >
</activity>

`orientation` ഉം `screenSize` ഉം ചേർക്കുന്നതിലൂടെ (API ലെവൽ 13-നും അതിനുമുകളിലുള്ളവയ്ക്കും ഇത് പ്രധാനമാണ്), ഓറിയന്റേഷൻ മാറ്റങ്ങൾ ആക്റ്റിവിറ്റി തന്നെ കൈകാര്യം ചെയ്യുമെന്ന് നിങ്ങൾ സിസ്റ്റത്തോട് പറയുന്നു. സ്‌ക്രീൻ തിരിയുമ്പോൾ, `onConfigurationChanged()` രീതി വിളിക്കപ്പെടും.

@Override
public void onConfigurationChanged(Configuration newConfig) {
 super.onConfigurationChanged(newConfig);

 // Check the orientation of the screen
 if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
 Toast.makeText(this, "landscape", Toast.LENGTH_SHORT).show();
 } else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){
 Toast.makeText(this, "portrait", Toast.LENGTH_SHORT).show();
 }
}

`onConfigurationChanged()` എന്നതിനകത്ത്, പുതിയ ഓറിയന്റേഷനെ അടിസ്ഥാനമാക്കി നിങ്ങൾക്ക് UI അപ്‌ഡേറ്റ് ചെയ്യാൻ കഴിയും. ആക്റ്റിവിറ്റി വീണ്ടും ഉണ്ടാക്കുന്നതിനേക്കാൾ ഈ സമീപനം കൂടുതൽ കാര്യക്ഷമമാണ്, കാരണം ഇത് ആവശ്യമില്ലാത്ത റിസോഴ്സ് ലോഡിംഗും ലേഔട്ട് ഇൻഫ്ലേഷനും ഒഴിവാക്കുന്നു.

b. ആക്റ്റിവിറ്റി സ്റ്റേറ്റ് സംരക്ഷിക്കുകയും പുനഃസ്ഥാപിക്കുകയും ചെയ്യുന്നു

നിങ്ങൾ തന്നെ കോൺഫിഗറേഷൻ മാറ്റം കൈകാര്യം ചെയ്യുകയാണെങ്കിൽ പോലും, ആക്റ്റിവിറ്റിയുടെ സ്റ്റേറ്റ് സംരക്ഷിക്കുകയും പുനഃസ്ഥാപിക്കുകയും ചെയ്യേണ്ടി വന്നേക്കാം. ഉദാഹരണത്തിന്, നിങ്ങളുടെ ആക്റ്റിവിറ്റിക്ക് ഒരു ടെക്സ്റ്റ് ഫീൽഡ് ഉണ്ടെങ്കിൽ, സ്‌ക്രീൻ തിരിയുമ്പോൾ ഉപയോക്താവ് നൽകിയ ടെക്സ്റ്റ് നിലനിർത്താൻ നിങ്ങൾ ആഗ്രഹിക്കും.

ആക്റ്റിവിറ്റിയുടെ സ്റ്റേറ്റ് സംരക്ഷിക്കാൻ നിങ്ങൾക്ക് `onSaveInstanceState()` രീതിയും, അത് പുനഃസ്ഥാപിക്കാൻ `onRestoreInstanceState()` രീതിയും ഉപയോഗിക്കാം.

@Override
public void onSaveInstanceState(Bundle savedInstanceState) {
 savedInstanceState.putString("my_text", myTextView.getText().toString());
 super.onSaveInstanceState(savedInstanceState);
}

@Override
public void onRestoreInstanceState(Bundle savedInstanceState) {
 super.onRestoreInstanceState(savedInstanceState);
 String myText = savedInstanceState.getString("my_text");
 myTextView.setText(myText);
}

പകരമായി, കോൺഫിഗറേഷൻ മാറ്റങ്ങളിലുടനീളം UI-യുമായി ബന്ധപ്പെട്ട ഡാറ്റ കൈകാര്യം ചെയ്യുന്നതിനും നിലനിർത്തുന്നതിനും SavedStateHandle-നൊപ്പം ViewModels ഉപയോഗിക്കാം, ഇത് കൂടുതൽ ആധുനികവും ശുപാർശ ചെയ്യപ്പെടുന്നതുമായ ഒരു സമീപനമാണ്.

c. ഇതര ലേഔട്ടുകൾ

വിവിധ സ്‌ക്രീൻ ഓറിയന്റേഷനുകൾക്കായി വ്യത്യസ്ത ലേഔട്ട് ഫയലുകൾ നൽകാൻ Android നിങ്ങളെ അനുവദിക്കുന്നു. `res/layout-land/` , `res/layout-port/` ഡയറക്ടറികളിൽ നിങ്ങൾക്ക് പ്രത്യേക ലേഔട്ട് ഫയലുകൾ ഉണ്ടാക്കാം. സ്‌ക്രീൻ തിരിയുമ്പോൾ, Android ഉചിതമായ ലേഔട്ട് ഫയൽ സ്വയമേവ ലോഡ് ചെയ്യും.

ലാൻഡ്‌സ്‌കേപ്പിലും പോർട്രെയ്റ്റ് ഓറിയന്റേഷനുകളിലും UI വളരെ വ്യത്യസ്തമായിരിക്കേണ്ട സമയങ്ങളിൽ ഈ സമീപനം ഉപയോഗപ്രദമാണ്. ഉദാഹരണത്തിന്, ലാൻഡ്‌സ്‌കേപ്പിൽ രണ്ട് പാനൽ ലേഔട്ടും പോർട്രെയിറ്റിൽ ഒരു പാനൽ ലേഔട്ടും പ്രദർശിപ്പിക്കാൻ നിങ്ങൾ ആഗ്രഹിച്ചേക്കാം.

d. ConstraintLayout ഉപയോഗിക്കുന്നു

ConstraintLayout ഒരു ശക്തമായ ലേഔട്ട് മാനേജറാണ്, ഇത് നിങ്ങൾക്ക് ഫ്ലെക്സിബിളും, പൊരുത്തപ്പെടുന്നതുമായ ലേഔട്ടുകൾ ഉണ്ടാക്കാൻ സഹായിക്കുന്നു. ConstraintLayout ഉപയോഗിച്ച്, വ്യൂകളെ പരസ്പരം ആപേക്ഷികമായും, പാരന്റ് ലേഔട്ടിന്റെ സ്ഥാനത്തും സ്ഥാപിക്കേണ്ടത് എങ്ങനെയെന്ന് നിർവചിക്കുന്ന നിയന്ത്രണങ്ങൾ നിങ്ങൾക്ക് നൽകാനാകും. ഇത് വ്യത്യസ്ത സ്‌ക്രീൻ വലുപ്പങ്ങൾക്കും ഓറിയന്റേഷനുകൾക്കും അനുയോജ്യമായ ലേഔട്ടുകൾ ഉണ്ടാക്കാൻ സഹായിക്കുന്നു.

2. iOS

സ്‌ക്രീൻ ഓറിയന്റേഷൻ മാറ്റങ്ങൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള സംവിധാനങ്ങളും iOS-ൽ ഉണ്ട്. ചില സാധാരണ സമീപനങ്ങൾ ഇതാ:

a. ഓട്ടോ ലേഔട്ട്

വ്യൂകളെ എങ്ങനെ സ്ഥാപിക്കണം, വലുപ്പം നൽകണം എന്നതിനെക്കുറിച്ചുള്ള നിയമങ്ങൾ നിർവചിക്കാൻ നിങ്ങളെ സഹായിക്കുന്ന, നിയന്ത്രണങ്ങളെ അടിസ്ഥാനമാക്കിയുള്ള ഒരു ലേഔട്ട് സിസ്റ്റമാണ് ഓട്ടോ ലേഔട്ട്. ഓട്ടോ ലേഔട്ട് നിയന്ത്രണങ്ങൾ നിങ്ങളുടെ UI വ്യത്യസ്ത സ്‌ക്രീൻ വലുപ്പങ്ങൾക്കും ഓറിയന്റേഷനുകൾക്കും അനുയോജ്യമാണെന്ന് ഉറപ്പാക്കുന്നു.

ഓട്ടോ ലേഔട്ട് ഉപയോഗിക്കുമ്പോൾ, നിങ്ങൾ സാധാരണയായി വ്യൂകൾ തമ്മിലുള്ള ബന്ധം വ്യക്തമാക്കുന്ന നിയന്ത്രണങ്ങൾ നൽകുന്നു. ഉദാഹരണത്തിന്, ഒരു ബട്ടൺ അതിന്റെ പേരന്റ് വ്യൂവിനുള്ളിൽ തിരശ്ചീനമായും ലംബമായും സ്ഥാപിക്കാൻ നിങ്ങൾക്ക് നിയന്ത്രിക്കാനാകും. സ്‌ക്രീൻ തിരിയുമ്പോൾ, നിയന്ത്രണങ്ങൾ നിറവേറ്റുന്നതിന് ഓട്ടോ ലേഔട്ട് എഞ്ചിൻ കാഴ്ചകളുടെ സ്ഥാനവും വലുപ്പവും സ്വയമേവ പുനർ കണക്കുകൂട്ടുന്നു.

b. വലുപ്പ ക്ലാസുകൾ

സ്‌ക്രീൻ വലുപ്പങ്ങളെയും ഓറിയന്റേഷനുകളെയും തരം തിരിക്കാനുള്ള ഒരു മാർഗമാണ് വലുപ്പ ക്ലാസുകൾ. iOS രണ്ട് വലുപ്പ ക്ലാസുകൾ നിർവചിക്കുന്നു: `Compact` , `Regular`. ഒരു ഉപകരണത്തിന് അതിന്റെ വീതിക്കും ഉയരത്തിനും വ്യത്യസ്ത വലുപ്പ ക്ലാസുകൾ ഉണ്ടാകാം. ഉദാഹരണത്തിന്, പോർട്രെയിറ്റ് ഓറിയന്റേഷനിലുള്ള ഒരു iPhone-ന് `Compact` വീതി വലുപ്പ ക്ലാസും `Regular` ഉയരം വലുപ്പ ക്ലാസും ഉണ്ട്. ലാൻഡ്‌സ്‌കേപ്പിൽ, ഇതിന് പലപ്പോഴും `Compact` ഉയരവും, `Compact` അല്ലെങ്കിൽ `Regular` വീതിയും ഉണ്ടാകാറുണ്ട്, ഇത് മോഡലിനെ ആശ്രയിച്ചിരിക്കുന്നു.

സ്‌ക്രീൻ വലുപ്പത്തെയും ഓറിയന്റേഷനെയും അടിസ്ഥാനമാക്കി നിങ്ങളുടെ UI ഇഷ്ടാനുസൃതമാക്കാൻ വലുപ്പ ക്ലാസുകൾ ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, വ്യത്യസ്ത വലുപ്പ ക്ലാസുകൾക്കായി വ്യത്യസ്ത വ്യൂകളോ വ്യത്യസ്ത ഫോണ്ടുകളോ പ്രദർശിപ്പിക്കാൻ നിങ്ങൾ ആഗ്രഹിച്ചേക്കാം.

ഇന്റർഫേസ് ബിൽഡറിലോ പ്രോഗ്രമാറ്റിക്കായി നേരിട്ടോ വലുപ്പ ക്ലാസുകളെ അടിസ്ഥാനമാക്കി വ്യത്യസ്ത നിയന്ത്രണങ്ങൾ കോൺഫിഗർ ചെയ്യാനും, വ്യൂകൾ ഇൻസ്റ്റാൾ ചെയ്യാനും/അൺഇൻസ്റ്റാൾ ചെയ്യാനും കഴിയും.

c. വ്യൂ കൺട്രോളർ റൊട്ടേഷൻ രീതികൾ

ഉപകരണം തിരിക്കുമ്പോൾ വിളിക്കപ്പെടുന്ന UIViewController ക്ലാസ്സിലെ നിരവധി രീതികൾ iOS നൽകുന്നു:

• viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator): ഒരു ട്രാൻസിഷനായി വ്യൂ കൺട്രോളറിന്റെ വ്യൂ വലുപ്പം മാറ്റുന്നതിന് തൊട്ടുമുന്‍പ് വിളിക്കുന്നു.
• viewWillLayoutSubviews(): വ്യൂ കൺട്രോളറിന്റെ വ്യൂ അതിന്റെ സബ്‌വ്യൂകളെ ലേഔട്ട് ചെയ്യുന്നതിന് തൊട്ടുമുന്‍പ് വിളിക്കുന്നു.
• viewDidLayoutSubviews(): വ്യൂ കൺട്രോളറിന്റെ വ്യൂ അതിന്റെ സബ്‌വ്യൂകളെ ലേഔട്ട് ചെയ്തതിന് ശേഷം വിളിക്കുന്നു.

സ്‌ക്രീൻ തിരിക്കുമ്പോൾ ഇഷ്ടമുള്ള ലേഔട്ട് ക്രമീകരണങ്ങൾ നടത്താൻ നിങ്ങൾക്ക് ഈ രീതികൾ ഓവർറൈഡ് ചെയ്യാം.

d. അറിയിപ്പ് കേന്ദ്രം

അറിയിപ്പ് കേന്ദ്രം ഉപയോഗിച്ച് ഓറിയന്റേഷൻ മാറ്റ അറിയിപ്പുകൾക്കായി നിങ്ങൾക്ക് ശ്രദ്ധിക്കാൻ കഴിയും:

NotificationCenter.default.addObserver(self, selector: #selector(orientationChanged), name: UIDevice.orientationDidChangeNotification, object: nil)

@objc func orientationChanged() {
 if UIDevice.current.orientation.isLandscape {
 print("Landscape")
 } else {
 print("Portrait")
 }
}

3. വെബ് വികസനം (HTML, CSS, JavaScript)

വെബ് വികസനത്തിൽ, സ്‌ക്രീൻ ഓറിയന്റേഷൻ മാറ്റങ്ങൾ കൈകാര്യം ചെയ്യാൻ നിങ്ങൾക്ക് CSS മീഡിയ ചോദ്യങ്ങളും JavaScript-ഉം ഉപയോഗിക്കാം.

a. CSS മീഡിയ ചോദ്യങ്ങൾ

സ്‌ക്രീൻ വലുപ്പം, ഓറിയന്റേഷൻ, മറ്റ് സവിശേഷതകൾ എന്നിവയെ അടിസ്ഥാനമാക്കി വ്യത്യസ്ത ശൈലികൾ പ്രയോഗിക്കാൻ മീഡിയ ചോദ്യങ്ങൾ നിങ്ങളെ സഹായിക്കുന്നു. പ്രത്യേക ഓറിയന്റേഷനുകൾ ലക്ഷ്യമിടാൻ നിങ്ങൾക്ക് `orientation` മീഡിയ ഫീച്ചർ ഉപയോഗിക്കാം.

/* Portrait orientation */
@media (orientation: portrait) {
 body {
 background-color: lightblue;
 }
}

/* Landscape orientation */
@media (orientation: landscape) {
 body {
 background-color: lightgreen;
 }
}

ഓറിയന്റേഷനെ അടിസ്ഥാനമാക്കി ലേഔട്ട്, ഫോണ്ടുകൾ, മറ്റ് ശൈലികൾ എന്നിവ ക്രമീകരിക്കുന്നതിന് നിങ്ങൾക്ക് മീഡിയ ചോദ്യങ്ങൾ ഉപയോഗിക്കാം.

b. JavaScript

സ്‌ക്രീൻ ഓറിയന്റേഷൻ മാറ്റങ്ങൾ കണ്ടെത്താനും ഇഷ്ടമുള്ള പ്രവർത്തനങ്ങൾ ചെയ്യാനും നിങ്ങൾക്ക് JavaScript ഉപയോഗിക്കാം. നിലവിലെ ഓറിയന്റേഷനെക്കുറിച്ച് വിവരങ്ങൾ നൽകുന്നത് `screen.orientation` API ആണ്.

function handleOrientationChange() {
 if (screen.orientation.type === "landscape-primary" || screen.orientation.type === "landscape-secondary") {
 console.log("Landscape");
 } else if (screen.orientation.type === "portrait-primary" || screen.orientation.type === "portrait-secondary") {
 console.log("Portrait");
 } else {
 console.log("Unknown orientation");
 }
}

window.addEventListener("orientationchange", handleOrientationChange);

പകരമായി, മീഡിയ ചോദ്യങ്ങൾ ഉപയോഗിച്ച് `matchMedia` API ഉപയോഗിക്കാം:

const landscapeMediaQuery = window.matchMedia("(orientation: landscape)");

function handleOrientationChange(event) {
 if (event.matches) {
 console.log("Landscape");
 } else {
 console.log("Portrait");
 }
}

landscapeMediaQuery.addEventListener("change", handleOrientationChange);

ഓറിയന്റേഷനെ അടിസ്ഥാനമാക്കി ലേഔട്ട്, വ്യത്യസ്ത റിസോഴ്‌സുകൾ എന്നിവ ഡൈനാമിക് ആയി ക്രമീകരിക്കുന്നതിനും അല്ലെങ്കിൽ മറ്റ് പ്രവർത്തനങ്ങൾ ചെയ്യുന്നതിനും JavaScript ഉപയോഗിക്കാം.

c. പ്രതികരണാത്മക രൂപകൽപ്പന ഫ്രെയിംവർക്കുകൾ

Bootstrap, Foundation, Materialize CSS തുടങ്ങിയ ഫ്രെയിംവർക്കുകൾ പ്രതികരണാത്മക രൂപകൽപ്പനയ്ക്കുള്ള പിന്തുണ നൽകുന്നു, ഇത് വ്യത്യസ്ത സ്‌ക്രീൻ വലുപ്പങ്ങൾക്കും ഓറിയന്റേഷനുകൾക്കും അനുയോജ്യമായ ലേഔട്ടുകൾ ഉണ്ടാക്കാൻ സഹായിക്കുന്നു. ഈ ഫ്രെയിംവർക്കുകൾ സാധാരണയായി ഫ്ലെക്സിബിളും പ്രതികരണാത്മകവുമായ UI-കൾ ഉണ്ടാക്കാൻ ഒരു ഗ്രിഡ് സിസ്റ്റവും മീഡിയ ചോദ്യങ്ങളും ഉപയോഗിക്കുന്നു.

സ്‌ക്രീൻ ഓറിയന്റേഷൻ കൈകാര്യം ചെയ്യുന്നതിനുള്ള മികച്ച രീതികൾ

സ്‌ക്രീൻ ഓറിയന്റേഷൻ മാറ്റങ്ങൾ കൈകാര്യം ചെയ്യുമ്പോൾ ശ്രദ്ധിക്കേണ്ട ചില മികച്ച രീതികൾ ഇതാ:

• ആവശ്യമില്ലാത്ത ആക്റ്റിവിറ്റി/വ്യൂകൺട്രോളർ വീണ്ടും ഉണ്ടാക്കുന്നത് ഒഴിവാക്കുക: കഴിയുമെങ്കിൽ, ആക്റ്റിവിറ്റിയോ വ്യൂകൺട്രോളറോ വീണ്ടും ഉണ്ടാക്കുന്നതിന്റെ അധിക ചിലവ് ഒഴിവാക്കാൻ കോൺഫിഗറേഷൻ മാറ്റം സ്വയം കൈകാര്യം ചെയ്യുക.
• സ്‌റ്റേറ്റ് സംരക്ഷിക്കുകയും പുനഃസ്ഥാപിക്കുകയും ചെയ്യുക: ഡാറ്റ നഷ്‌ടപ്പെടാതിരിക്കാൻ എപ്പോഴും ആക്റ്റിവിറ്റിയുടെ/വ്യൂകൺട്രോളറിന്റെ സ്‌റ്റേറ്റ് സംരക്ഷിക്കുകയും പുനഃസ്ഥാപിക്കുകയും ചെയ്യുക. കൂടുതൽ ശക്തമായ സ്റ്റേറ്റ് മാനേജ്‌മെന്റിനായി ViewModels ഉപയോഗിക്കുക.
• ഓട്ടോ ലേഔട്ട് അല്ലെങ്കിൽ ConstraintLayout ഉപയോഗിക്കുക: ഈ ലേഔട്ട് സിസ്റ്റങ്ങൾ ഫ്ലെക്സിബിളും പൊരുത്തപ്പെടുന്നതുമായ ലേഔട്ടുകൾ ഉണ്ടാക്കാൻ സഹായിക്കുന്നു.
• ഒന്നിലധികം ഉപകരണങ്ങളിൽ പരീക്ഷിക്കുക: നിങ്ങളുടെ ആപ്ലിക്കേഷൻ ശരിയായി പ്രവർത്തിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ വ്യത്യസ്ത സ്‌ക്രീൻ വലുപ്പങ്ങളും ഹാർഡ്‌വെയർ കോൺഫിഗറേഷനുകളും ഉള്ള വിവിധ ഉപകരണങ്ങളിൽ പരീക്ഷിക്കുക.
• പ്രവേശനക്ഷമത പരിഗണിക്കുക: സ്‌ക്രീൻ തിരിയുമ്പോൾ നിങ്ങളുടെ ആപ്ലിക്കേഷൻ വൈകല്യമുള്ളവർക്ക് ഉപയോഗിക്കാൻ കഴിയുമെന്ന് ഉറപ്പാക്കുക.
• വ്യക്തമായ വിഷ്വൽ സൂചനകൾ നൽകുക: സ്‌ക്രീൻ തിരിക്കുമ്പോൾ UI-യിൽ കാര്യമായ മാറ്റങ്ങൾ വരുത്തുകയാണെങ്കിൽ, മാറ്റങ്ങൾ മനസ്സിലാക്കാൻ ഉപയോക്താക്കളെ സഹായിക്കുന്നതിന് വ്യക്തമായ വിഷ്വൽ സൂചനകൾ നൽകുക.
• ഒരു പ്രത്യേക ഓറിയന്റേഷൻ നിർബന്ധിച്ച് ഉപയോഗിക്കാതിരിക്കുക (ആവശ്യമെങ്കിൽ മാത്രം): കഴിയുന്നത്രയും ഉപയോക്താക്കൾക്ക് അവരുടെ ഇഷ്ടമുള്ള ഓറിയന്റേഷനിൽ അവരുടെ ഉപകരണം ഉപയോഗിക്കാൻ അനുവദിക്കുക. ഒരു ഓറിയന്റേഷൻ നിർബന്ധിക്കുന്നത് വളരെ ബുദ്ധിമുട്ടുള്ളതും സൗകര്യപ്രദമല്ലാത്തതുമാകാം. ആപ്ലിക്കേഷന്റെ പ്രവർത്തനത്തിന് ഇത് നിർണായകമാണെങ്കിൽ മാത്രം ഓറിയന്റേഷൻ ലോക്ക് ചെയ്യുക (ഉദാഹരണത്തിന്, ലാൻഡ്‌സ്‌കേപ്പ് മോഡ് ആവശ്യമുള്ള ഒരു ഗെയിം). നിങ്ങൾ ഓറിയന്റേഷൻ ലോക്ക് ചെയ്യുകയാണെങ്കിൽ, എന്തുകൊണ്ടാണ് അങ്ങനെ ചെയ്യുന്നതെന്ന് ഉപയോക്താവിനെ വ്യക്തമായി അറിയിക്കുക.
• പ്രകടനത്തിനായി ഒപ്റ്റിമൈസ് ചെയ്യുക: പ്രകടന പ്രശ്നങ്ങൾ ഒഴിവാക്കാൻ സ്‌ക്രീൻ തിരിയുമ്പോൾ ചെയ്യേണ്ട ജോലികൾ കുറയ്ക്കുക.
• ആപേക്ഷിക യൂണിറ്റുകൾ ഉപയോഗിക്കുക: നിങ്ങളുടെ ലേഔട്ടിൽ വലുപ്പവും സ്ഥാനവും നിർവചിക്കുമ്പോൾ, കേവല യൂണിറ്റുകൾക്ക് (ഉദാഹരണത്തിന്, പിക്സലുകൾ) പകരം ആപേക്ഷിക യൂണിറ്റുകൾ (ഉദാഹരണത്തിന്, ശതമാനം, `dp`, `sp`) ഉപയോഗിക്കുക, ഇത് വ്യത്യസ്ത സ്‌ക്രീൻ വലുപ്പങ്ങളിൽ നിങ്ങളുടെ UI ശരിയായി സ്കെയിൽ ചെയ്യുന്നു എന്ന് ഉറപ്പാക്കുന്നു.
• നിലവിലുള്ള ലൈബ്രറികളും ഫ്രെയിംവർക്കുകളും പ്രയോജനപ്പെടുത്തുക: പ്രതികരണാത്മക രൂപകൽപ്പനയ്ക്കും സ്‌ക്രീൻ ഓറിയന്റേഷൻ കൈകാര്യം ചെയ്യുന്നതിനും പിന്തുണ നൽകുന്ന നിലവിലുള്ള ലൈബ്രറികളും ഫ്രെയിംവർക്കുകളും പ്രയോജനപ്പെടുത്തുക.

ഓറിയന്റേഷൻ ലോക്കിംഗും ഉപയോക്തൃ അനുഭവവും

ഉപയോക്താക്കൾക്ക് അവരുടെ ഉപകരണങ്ങൾ സ്വതന്ത്രമായി തിരിക്കാൻ അനുവദിക്കുന്നതാണ് നല്ലതെങ്കിലും, നിങ്ങൾ സ്‌ക്രീൻ ഓറിയന്റേഷൻ ലോക്ക് ചെയ്യാൻ ആഗ്രഹിക്കുന്ന ചില സാഹചര്യങ്ങളുണ്ട്. ഉദാഹരണത്തിന്, ഒരു പൂർണ്ണ സ്‌ക്രീൻ വീഡിയോ പ്ലെയർ ഒപ്റ്റിമൽ കാഴ്ചയ്ക്കായി ഓറിയന്റേഷൻ ലാൻഡ്‌സ്‌കേപ്പ് മോഡിലേക്ക് ലോക്ക് ചെയ്യാം.

എങ്കിലും, ഓറിയന്റേഷൻ ലോക്ക് മിതമായി ഉപയോഗിക്കേണ്ടതും, ഉപയോക്താവിന് വ്യക്തമായ ഒരു കാരണം നൽകേണ്ടതും പ്രധാനമാണ്. ഒരു ഓറിയന്റേഷൻ നിർബന്ധിക്കുന്നത് നിരാശാജനകവും നിങ്ങളുടെ ആപ്ലിക്കേഷനെ കൂടുതൽ പ്രവേശനക്ഷമമല്ലാത്തതുമാക്കും.

സ്‌ക്രീൻ ഓറിയന്റേഷൻ എങ്ങനെ ലോക്ക് ചെയ്യാം

Android

AndroidManifest.xml ഫയലിൽ `screenOrientation` ആട്രിബ്യൂട്ട് നൽകി Android-ൽ സ്‌ക്രീൻ ഓറിയന്റേഷൻ ലോക്ക് ചെയ്യാം:

<activity
 android:name=".MyActivity"
 android:screenOrientation="landscape"
 ... >
</activity>

നിങ്ങൾക്ക് പ്രോഗ്രാമാറ്റിക്കായി ഓറിയന്റേഷൻ ലോക്ക് ചെയ്യാനും കഴിയും:

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

iOS

iOS-ൽ, Info.plist ഫയലിൽ പിന്തുണയ്ക്കുന്ന ഓറിയന്റേഷനുകൾ നിങ്ങൾക്ക് വ്യക്തമാക്കാം. നിങ്ങളുടെ വ്യൂ കൺട്രോളറിൽ `supportedInterfaceOrientations` രീതി ഓവർറൈഡ് ചെയ്യാനും കഴിയും:

override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
 return .landscape
}

ആഗോള പരിഗണനകൾ

ഒരു ആഗോള പ്രേക്ഷകർക്കായി രൂപകൽപ്പന ചെയ്യുമ്പോൾ, സ്‌ക്രീൻ ഓറിയന്റേഷനെക്കുറിച്ച് താഴെ പറയുന്ന കാര്യങ്ങൾ ഓർമ്മയിൽ വയ്ക്കുക:

• വലത്തുനിന്ന് ഇടത്തേക്ക് (RTL) ലേഔട്ടുകൾ: നിങ്ങളുടെ UI RTL ഭാഷകളുമായി എങ്ങനെ പൊരുത്തപ്പെടുമെന്ന് പരിഗണിക്കുക. അറബി, ഹീബ്രു പോലുള്ള ചില ഭാഷകൾ വലത്തുനിന്ന് ഇടത്തേക്കാണ് എഴുതുന്നത്. RTL മോഡിൽ നിങ്ങളുടെ ലേഔട്ട് ശരിയായി പ്രതിഫലിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക. ഓട്ടോ ലേഔട്ടും ConstraintLayout-ഉം പലപ്പോഴും RTL ലേഔട്ടുകൾക്കായി അന്തർനിർമ്മിത പിന്തുണ നൽകുന്നു.
• സാംസ്കാരിക മുൻഗണനകൾ: ഉപകരണ ഉപയോഗവുമായി ബന്ധപ്പെട്ട സാംസ്കാരിക മുൻഗണനകളെക്കുറിച്ച് ബോധവാന്മാരായിരിക്കുക. മിക്ക ഉപയോക്താക്കളും പോർട്രെയിറ്റും ലാൻഡ്‌സ്‌കേപ്പ് മോഡുകളും ഉപയോഗിക്കാൻ ശീലിച്ചിട്ടുണ്ടെങ്കിലും, ചില സംസ്കാരങ്ങൾക്ക് നേരിയ മുൻഗണനകൾ ഉണ്ടാകാം. വ്യത്യസ്ത പ്രദേശങ്ങളിൽ നിന്നുള്ള ഉപയോക്താക്കളുമായി പരീക്ഷിക്കുന്നത് വിലപ്പെട്ട ഉൾക്കാഴ്ച നൽകും.
• വിവിധ ഉപയോക്താക്കൾക്കുള്ള പ്രവേശനക്ഷമത: എപ്പോഴും പ്രവേശനക്ഷമതയ്ക്ക് മുൻഗണന നൽകുക. സ്‌ക്രീൻ ഓറിയന്റേഷൻ പരിഗണിക്കാതെ തന്നെ വൈകല്യമുള്ള ആളുകൾക്ക് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ ഉപയോഗിക്കാൻ കഴിയുമെന്ന് ഉറപ്പാക്കുക. ചിത്രങ്ങൾക്കായി ഇതര ടെക്സ്റ്റ് നൽകുക, മതിയായ വർണ്ണ ദൃശ്യപരത ഉറപ്പാക്കുക, സഹായകമായ സാങ്കേതികവിദ്യകളെ പിന്തുണയ്ക്കുക എന്നിവ ഇതിൽ ഉൾപ്പെടുന്നു.

സ്‌ക്രീൻ ഓറിയന്റേഷൻ കൈകാര്യം ചെയ്യുന്നത് എങ്ങനെ പരീക്ഷിക്കാം

നിങ്ങളുടെ ആപ്ലിക്കേഷൻ സ്‌ക്രീൻ ഓറിയന്റേഷൻ മാറ്റങ്ങൾ ശരിയായി കൈകാര്യം ചെയ്യുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ, നന്നായി പരീക്ഷിക്കേണ്ടത് അത്യാവശ്യമാണ്. പരിശോധിക്കുന്നതിനുള്ള ചില നുറുങ്ങുകൾ ഇതാ:

• എമുലേറ്ററുകളും യഥാർത്ഥ ഉപകരണങ്ങളും ഉപയോഗിക്കുക: വിശാലമായ സ്‌ക്രീൻ വലുപ്പങ്ങളും ഹാർഡ്‌വെയർ കോൺഫിഗറേഷനുകളും ഉൾക്കൊള്ളുന്നതിന്, എമുലേറ്ററുകളിലും യഥാർത്ഥ ഉപകരണങ്ങളിലും നിങ്ങളുടെ ആപ്ലിക്കേഷൻ പരീക്ഷിക്കുക.
• വിവിധ ഓറിയന്റേഷനുകളിൽ പരീക്ഷിക്കുക: പോർട്രെയിറ്റിലും ലാൻഡ്‌സ്‌കേപ്പ് ഓറിയന്റേഷനുകളിലും, അതുപോലെ പിന്തുണയ്‌ക്കുകയാണെങ്കിൽ റിവേഴ്‌സ് പോർട്രെയിറ്റിലും റിവേഴ്‌സ് ലാൻഡ്‌സ്‌കേപ്പിലും നിങ്ങളുടെ ആപ്ലിക്കേഷൻ പരീക്ഷിക്കുക.
• വ്യത്യസ്ത സ്‌ക്രീൻ വലുപ്പങ്ങൾ ഉപയോഗിച്ച് പരീക്ഷിക്കുക: UI ശരിയായി സ്കെയിൽ ചെയ്യുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ വ്യത്യസ്ത സ്‌ക്രീൻ വലുപ്പങ്ങളുള്ള ഉപകരണങ്ങളിൽ നിങ്ങളുടെ ആപ്ലിക്കേഷൻ പരീക്ഷിക്കുക.
• വ്യത്യസ്ത ഫോണ്ട് വലുപ്പങ്ങൾ ഉപയോഗിച്ച് പരീക്ഷിക്കുക: ടെക്സ്റ്റ് വായിക്കാൻ കഴിയുമെന്ന് ഉറപ്പാക്കാൻ വ്യത്യസ്ത ഫോണ്ട് വലുപ്പങ്ങൾ ഉപയോഗിച്ച് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ പരീക്ഷിക്കുക.
• പ്രവേശനക്ഷമത ഫീച്ചറുകൾ ഉപയോഗിച്ച് പരീക്ഷിക്കുക: വൈകല്യമുള്ള ഉപയോക്താക്കൾക്ക് ഇത് ലഭ്യമാണെന്ന് ഉറപ്പാക്കാൻ, സ്‌ക്രീൻ റീഡറുകൾ പോലുള്ള പ്രവേശനക്ഷമത ഫീച്ചറുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ പരീക്ഷിക്കുക.
• ഓട്ടോമേറ്റഡ് ടെസ്റ്റിംഗ്: സ്‌ക്രീൻ ഓറിയന്റേഷൻ മാറ്റങ്ങൾ ഉൾക്കൊള്ളുന്ന ഓട്ടോമേറ്റഡ് UI ടെസ്റ്റുകൾ നടപ്പിലാക്കുക. ഇത് പിന്നോട്ട് പോകുന്നവ കണ്ടെത്താനും റിലീസുകളിലുടനീളം സ്ഥിരമായ പെരുമാറ്റം ഉറപ്പാക്കാനും സഹായിക്കും.

ഉപസംഹാരം

സ്‌ക്രീൻ ഓറിയന്റേഷൻ ഫലപ്രദമായി കൈകാര്യം ചെയ്യുന്നത് മൊബൈൽ, വെബ് വികസനത്തിന്റെ ഒരു പ്രധാന ഘടകമാണ്. ഓരോ പ്ലാറ്റ്‌ഫോമിലും ലഭ്യമായ വ്യത്യസ്ത സാങ്കേതിക വിദ്യകളും മികച്ച രീതികളും മനസ്സിലാക്കുന്നതിലൂടെ, ഉപയോക്താവ് അവരുടെ ഉപകരണം എങ്ങനെ പിടിച്ചാലും തടസ്സമില്ലാത്തതും ആസ്വാദ്യകരവുമായ ഒരു ഉപയോക്തൃ അനുഭവം നൽകുന്ന ആപ്ലിക്കേഷനുകൾ നിങ്ങൾക്ക് ഉണ്ടാക്കാൻ കഴിയും. നിങ്ങളുടെ ആപ്ലിക്കേഷൻ വൈവിധ്യമാർന്ന പ്രേക്ഷകർക്ക് പ്രവേശനക്ഷമവും ഉപയോക്തൃ സൗഹൃദപരവുമാണെന്ന് ഉറപ്പാക്കാൻ, ടെസ്റ്റിംഗിന് മുൻഗണന നൽകാനും നിങ്ങളുടെ രൂപകൽപ്പന തിരഞ്ഞെടുക്കുന്നതിന്റെ ആഗോളപരമായ കാര്യങ്ങൾ പരിഗണിക്കാനും ഓർമ്മിക്കുക.